<template>
  <div style="margin-bottom: 10px;">
    <el-upload
      style="margin-top: 10px;"
      class="upload-demo"
      action=""
      :before-upload="beforeUploadHandle"
      :http-request="requestHttp"
      :on-success="fileSuccess"
      :on-remove="handleRemove"
      name="file"
      :limit="1"
    >
      <el-button size="small" v-if="isStop" type="primary" @click.stop="stop"
        >点击上传2</el-button
      >
      <el-button size="small" v-else type="primary">点击上传3</el-button>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  data() {
    return {
      // editorArr: []
    }
  },
  props: {
    // img media
    uploadType: {
      type: String,
      default: 'img'
    },
    isStop: {
      type: Boolean,
      default: false
    },
    editorArr: {
      type: Array,
      default: []
    }
  },
  created() {},
  methods: {
    stop() {},
    fileSuccess(file, e) {
      console.log(file, e)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeUploadHandle(file) {
      console.log(file)
      // 图片
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGif = file.type === 'image/gif'

      // 视频
      const isMP4 = file.type === 'video/mp4'
      const isFlv = file.type === 'video/flv'
      const isAvi = file.type === 'video/avi'
      const isWMV = file.type === 'video/wmv'

      // 音频
      const isMP3 = file.type === 'audio/mpeg'
      const isFlc = file.type === 'audio/flc'

      const isLt2M = file.size / 1024 / 1024 < 5
      if (this.uploadType == 'img') {
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG /png/Gif格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return (isJPG || isPNG || isGif) && isLt2M
      } else if (this.uploadType == 'video') {
        // 视频文件
        if (!isMP4 && !isFlv && !isAvi) {
          this.$message.error('请上传正确的文件')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return (isMP4 || isFlv || isAvi) && !isLt2M
      } else {
        // 音频文件
        if (!isMp3 && !isOgg && !isFlc) {
          this.$message.error('请上传正确的文件')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return (isMp3 || isOgg || isFlc) && isLt2M
      }
    },
    // 随机生成文件名
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    requestHttp(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      let config = {
        headers: {
          token: Vue.cookie.get('token'),
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post(
          `${this.$config.SERVER_URL}/admin/sys/oss/upload`,
          formData,
          config
        )
        .then(obj => {
          if (obj.status == 200) {
            let fileUrl = obj.data.data.url
            let arr = []
            arr.push({
              url: fileUrl,
              uid: file.file.uid
            })
            arr.forEach(element => {
              if (element.url) {
                this.editorArr.push(element.url)
              } else {
                this.editorArr.push(element)
              }
            })
            this.$emit('getUpload', this.editorArr)
          }
        })
    }
  }
}
</script>

<style scoped></style>
